<template>
  <view>
    <u-popup :show="isshow" @close="cancel">
      <view class="popup">
        <image :src="image"></image>
        <view class="close" @tap="cancel"></view>
        <view class="btn" @tap="topage"></view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts">
  import {
    Component,
    Vue,
    Prop
  } from 'vue-property-decorator'
  import {
    getRecyclingSend
  } from "@/api/modules/global";

  @Component({})
  export default class HomeRecycling extends Vue {
    @Prop({
      type: Object
    })
    decoretionProperties: Object

    isshow: boolean = false
    image: string = ""

    // 组件周期函数--监听组件挂载完毕
    mounted() {
      // this.getProperties(this.decoretionProperties)
      this.image = this.$store.state.settingStore.recyclingsetting.homePromptBgImg || "";
      if (this.$store.state.userStore.userInfo.token) {
        // this.getCouponList();
        this.isshow = false
      } else {
        this.appLaunchInit();
      }
    }
    getProperties(formdata) {
      this.isshow = formdata.isshow
      this.image = formdata.image
    }

    appLaunchInit() {
      const openrecyling = this.$store.state.settingStore.recyclingsetting.recyclingState;
      this.$Pubsub.on("app-launch", () => {
        getRecyclingSend().then(res => {
          this.isshow = res && openrecyling
          this.image = this.$store.state.settingStore.recyclingsetting.homePromptBgImg
        });
      });
    }

    cancel() {
      this.isshow = false
    }

    topage() {
      this.isshow = false
      uni.navigateTo({
        url: "/subcontract/pages/mysend/mysend",
      });
    }
  }
</script>

<style lang="scss" scoped>
  .popup {
    width: 610rpx;
    height: 550rpx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .close {
      width: 60rpx;
      height: 60rpx;
      // background-color: rgba(0,0,0,0.3);
      position: absolute;
      top: 0;
      right: 0;
    }

    .btn {
      width: 420rpx;
      height: 70rpx;
      // background-color: rgba(0,0,0,0.3);
      position: absolute;
      bottom: 40rpx;
      right: 0;
      left: 0;
      margin: 0 auto;
    }
  }
</style>